♪ ♪ なぜジョーカーはこんなに緑と黄色に不安を感じるのか? Why does   feel so unsettlingly green and yellow? Joker ジョーカー ♪ ♪ なぜBlade Runnerはオレンジとティールに浸かっているのか? Why is   soaked in teal and orange? Blade Runner BLADE RUNNER ♪ ♪ なぜフィルムは肌を柔らかく、温かくするのか? Why does film make skin look soft and warm? 魔法じゃない、色だ。 そして、誰が色をコントロールするかは、フレームの感情的な重みをコントロールします。カラー評価は、映画の視覚的な言語です - 雰囲気を形作り、視聴者の注意を導き、物語のトーンを設定する方法です。それは微妙でほぼ目に見えないかもしれません。または大胆でスタイリッシュ、ウォン・カルワイ、フィンチャー、ノーラン、またはヴィルヌーヴの作品のように。 実際の色作業はどこから始まるのか? 「正しい」色が何であるかをどのように知るか? そして、どのようにして創造的な意図を技術的行動に翻訳するのか? Spoiler:それはLUTやフィルターで始まらない。 で。 それは色のターゲット、カリブレーション、そして慎重に選択されたパレットから始まります。 このシリーズでは、私たちは探索します: ♪ ♪ ♪ ♪ ♪ 最も基本的なレベルでどの色を評価するか。 なぜパレットを制限することはバグではなく機能なのか。 色のグラフがどのように機能するか(そしてなぜ重要なのか) and how to build your own grading tool in the browser — with React and some simple math. ブラウザで独自の評価ツールを構築する方法 そして、あなたは実験することができ、Tinker、そして、おそらく初めて実際に どんな色が作られていますか? 説明するのではなく、見せてあげましょう。 see What is Color Grading, and Why Start with Color Targets? 色の分類とは何ですか?そしてなぜ色のターゲットから始めるのですか? 色の評価は、特定の視覚的トーン、感情的効果、または技術的基準を達成するためにイメージを調整しスタイリングするプロセスです。 ♪ ♪ ♪ ♪ 露出と白い点のバランスをとる。 技術的な色の変化の修正 コントラスト、トーン、および色の曲線で視覚的なスタイルを作成する。 しかし、評価は単に「美しくする」ことではなく、気分、視聴者の焦点、全物語のビジュアル言語のコントロールについてです。 クリエイティブな外観を適用する前に、あなたは画像をAに持ち込む必要があります。 つまり: neutral state ♪ ♪ ♪ ♪ 不要な色彩を修正する(色の修正) 撮影を標準カラースペース(Rec.709またはsRGBなど)に正常化する。 さまざまなカメラの素材を一貫したベースラインに合わせる。 そのために、カラーは使います。 同様に♪ で、 ◎その他の参考図 color targets カラーチェック クリスマス A color target is a chart of color patches with これらの値は任意ではありません - X-Rite や X-Rite などのプロフェッショナルな機器を使用した制御された環境におけるスペクトロフォトメトリック測定によって得られます。 正確に測定した値 . Konica Minolta spectrophotometers Konica Minolta スペクトロフォトメーター 広く採用された最初の目標の1つは、 — 露出制御のために使用された中立の灰色の色合いのストリップ. Later came more advanced charts with full-color patches — like the 1976年に導入された(現在は「 それは、現実世界の共通の色を表すように設計された24色のスワッチを備えています:人間の皮膚、青い空、緑の葉、その他。 コダックグレイスケール Macbeth ColorChecker X-Rite ColorChecker コダックグレイスケール デジタル写真とデジタル映画の出現に伴い、カラーターゲットはますます重要な役割を果たし、カメラだけでなく、モニター、プリンター、スキャナ、そして色を扱うあらゆるデバイスをカリブレートするための不可欠なツールとなりました。 たとえば、X-Rite の ColorChecker を用いて、各パッチは標準化された照明下で測定されます(通常は または )で記録された結果 デバイス独立のカラーモデルで、これらの座標が変換されます。 あなたの作業色空間(たとえば で、 あるいは ( ) D65 D50 CIE XYZ coordinates RGB values sRGB Rec.709 AdobeRGB したがって、当社のアプリで使用するRGBアーレイは推測ではなく、標準化された物理的に測定されたパッチの正確なデジタル表示です。 ColorChecker Classic の皮膚のトーンパッチが RGB で [194, 150, 130] と定義されている場合は、正しい条件下でそのように見えるべきです。 The Catch: Color Charts Are Just the Beginning 色のターゲットは校正に不可欠ですが、それだけです。 彼らは計算しない: 1 始まり ♪ ♪ ♪ ♪ どのように色がハイライトや影で振る舞うか フィルムまたはレンズのユニークな特徴 あるいは、特定の視点の背後にある創造的な意図。 プロのようなツールで、 または , カラーグラフは長いパイプラインのステップ1に過ぎません。そこから、あなたはフィルムエミュレーション、トーンマッピング、穀物、ハライト、フローム、その他のスタイリッシュな変換などの高度なプロセスに移行します。 DaVinci Resolve 防衛 a chart is a calibration tool — not a style. ダヴィンチ解決 防衛 CinePalette: A Minimal Tool for Exploring Color Palettes CinePalette: 色のパレットを探索するための最小のツール パレットの選択が画像にどのように影響するかを示すために、我々は あなたの色空間を制限するときに起こることを視覚化するシンプルなウェブアプリケーション(カラースペースとして知られるプロセス) ( ) CinePalette パレット削減 What You Can Do with CinePalette: ♪ ♪ ♪ ♪ ♪ ♪ ♪ 画像をアップロードし、 パレット(ColorChecker、Portra、Sepiaなど)を選択します。 それぞれのピクセルをそのパレットの最も近い色にリメイクします。 インタラクティブなスライダーで前と後を比較する 結果を保存し、 あるいは、自分自身のパレットをゼロから作る。 How It Works in Code 私たちのアプリは、使用するブラウザで完全に実行されます。 そして、The プロジェクト - Called — オープンソースで、GitHubで利用可能になります(シリーズの最後のリンク)。 React Canvas API CinePalette 私たちは、事前に定義されたパレットのセットから始めますが、ユーザーは独自のパレットを作成して保存することもできます。 パレットはこんな感じ: Kodak Portra 400 "Portra 400": [
  [75, 60, 50],     // shadows
  [160, 130, 110],  // skin tones
  [220, 200, 180],  // highlights
  [60, 100, 80],    // foliage
  [180, 150, 100]   // neutral
],
 選択したパレットは、最終画像にどの色が「許される」かを定義します これらは、フレームのビジュアル言語 - 雰囲気とスタイルを設定する基本的なトーンになります。 ユーザーが画像をアップロードしてパレットを選択すると、キャップの下で起こることは以下の通りです。 ♪ ♪ ♪ ♪ ♪ 画像は隠された <canvas> にレンダリングされます - これは、データを操作するためのピクセルレベルのアクセスを提供します。 We extract the ImageData object, which contains an array where each pixel is represented by four values: [R、G、B、A]. それぞれのピクセルをロープし、RGB色を抽出します。 各ピクセルでは、選択したパレットから最も近い一致する色を見つけて、RGB空間のユークリッド距離を使用して、それを置き換えます。 シャーリーカードをアップロードし、異なるパレットを適用してみましょう - あなたはすぐにパレット選択が画像を形作る方法を見ることができます。 魔法の核心は、分析する機能にあります。 and finds the 選択したパレットから: each individual pixel closest matching color const findClosestColor = (r, g, b) => {
  let minDist = Infinity;
  let closest = [r, g, b];
  for (let [pr, pg, pb] of palette) {
    const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
    if (dist < minDist) {
      minDist = dist;
      closest = [pr, pg, pb];
    }
  }
  return closest;
};
 次に、ImageData でピクセルの元の色をパレットから最も接近した色に置き換えます。 イメージの中。 for every single pixel for (let i = 0; i < data.length; i += 4) {
  const [r, g, b] = [data[i], data[i + 1], data[i + 2]];
  const [nr, ng, nb] = findClosestColor(r, g, b);
  data[i] = nr;
  data[i + 1] = ng;
  data[i + 2] = nb;
}
 すべてのピクセルが処理されると、結果を <canvas> に戻し、 .toDataURL() を使用して画像に変換します。 フィルターされた画像を1クリックでダウンロード see the result instantly in the browser ctx.putImageData(imageData, 0, 0);
setFilteredImage(canvas.toDataURL());
 ここで、我々は使用 — 二つの色がどれほど「近い」かを測るための古典的な方法: Euclidean distance in RGB space const dist = Math.sqrt((r - pr) ** 2 + (g - pg) ** 2 + (b - pb) ** 2);
 ここで(r、g、b)は現在のピクセルの色であり、(pr、pg、pb)はパレットの色の1つです。 選択したパレット内で closest visual match このアプローチは直感的で実装しやすいが、限界がある: たとえば、私たちは青よりも緑に敏感であり、明るさの違いは誤解する可能性があります。 RGB空間は、人間が実際の色をどのように認識しているかを反映していない。 私たちはこのアプローチを用いて、 ただし、現在の形でさえ、一部の色が予想外または「オフ」と感じる方法で置き換えられることに気付くかもしれません。 CinePalette 将来のバージョンでは、私たちは交差点を追加する予定です。 色スペース - ユーザーが異なるモデルが色の一致の精度にどのように影響するかを比較できるようにします。 RGB and CIELAB Why Does This Matter? なぜ重要なのか。 CinePaletteは、カラー分類における基本的だが根本的なステップを示しています。 これが、あらゆるビジュアルスタイルが始まる場所です―質問: palette restriction “What if we only used these colors?”. ポルトラパレットは温かいノスタルギーのトーンをもたらします。プロ400はクールで柔らかい感じがします。ティール&オレンジは高コントラストの映画ポンチを提供します。デハンサーやResolveのようなツールとは異なり、CinePaletteは映画の物理をシミュレートしません。しかし、それは本質をキャプチャします: 色はスタイルとストーリーを語るためのツールです。 What’s Next? 次は何? これは始まりに過ぎないが、シリーズの次の部分では、 ♪ ♪ ♪ ♪ ♪ CinePalette を拡張し、参考画像からパレットを選択できるようになります。 すべてのフレームや写真から自動的にカラースケジュールの抽出を追加します。 より知覚的に正確な一致のためにRGBとLABの交差を導入する。 色調調和がどのように機能するか、そして実際の世界の評価でどのように使用できるかを解説します。 調和を保ち、色を学ぶだけでなく、真にそれを見る準備をしてください。 見る

Read My Stories

このオーディオは、ストーリーの元の言語で制作されています。

このシンプルなアプリは、ハリウッドがあなたの感情と混同するために色を使用する方法を見せてくれます

About Author

コメント

ラベル

この記事は

Related Stories

暗号通貨の成長: 効果的なユーザーペルソナの作成

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

暗号通貨の成長: 効果的なユーザーペルソナの作成

18 種類の開発者ツールで生産性を向上しましょう 🚀🔥

ユーザー中心の暗号通貨製品の作成: 顧客からのフィードバックの重要性

クラウド移行を成功させるための完全ガイド: 戦略とベストプラクティス

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps